<!DOCTYPE html>
<html>
  <head>
    <title>Serial Chart</title>
    <!-- Load css -->

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet" type="text/css">
    <!-- Load js -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="canvasjs/canvasjs.min.js"></script>

  </head>
  <body>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Serial Ports</h3>
      </div>
      <div class="panel-body">

        <div class="row">
          <div class="col-lg-4">
            <div class="input-group">
              <span class="input-group-addon">Baud Rate</span>
              <input
                type="text"
                class="form-control"
                placeholder="Default is 57600, click port name to connect"
                aria-describedby="basic-addon1"
                id="baudrate"></input>

              <div class="btn-group" role="group" id="ports"></div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="input-group">
              <span class="input-group-addon">Max Data Length</span>
              <input
                type="text"
                class="form-control"
                placeholder="Default is 100"
                aria-describedby="basic-addon1"
                id="maxlength"
                onchange="changeMaxLength($(this).val()||$(this).attr('placeholder'))"></input>
              <input
                type="checkbox"
                checked
                name="dataFlowControl"
                data-on-text="Reading Data"
                data-off-text="Stop Reading"></input>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="input-group">
              <span class="input-group-addon">Write To Serial</span>
              <input
                type="text"
                class="form-control"
                aria-describedby="basic-addon1"
                id="dataToWrite"
                placeholder="Content is URL encoded"></input>

              <div class="input-group">
                <button type="button" class="btn btn-default" onclick="writeToSerial($('#dataToWrite').val())">Write</button>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Chart Properties
            <input type="checkbox" unchecked name="chartControl"></input>
          </h3>
        </div>
        <div class="panel-body" id="chartControlBody">

          <div class="row">

            <div class="col-lg-3" id="minmax">
              <div class="input-group">
                <span class="input-group-addon">Max</span>
                <input
                  type="text"
                  class="form-control"
                  placeholder="Max Y-axis value"
                  aria-describedby="basic-addon1"
                  id="maxY"
                  onchange="changeChartRange()"></input>
              </div>
              <div class="input-group">
                <span class="input-group-addon">Min</span>
                <input
                  type="text"
                  class="form-control"
                  placeholder="Min Y-axis value"
                  aria-describedby="basic-addon1"
                  id="minY"
                  onchange="changeChartRange()"></input>
              </div>

            </div>

            <div class="col-lg-4">
              <div class="input-group">
                <span class="input-group-addon">Data names</span>
                <input
                  type="text"
                  class="form-control"
                  placeholder="Example: A0,A1,A2"
                  aria-describedby="basic-addon1"
                  id="datanames"
                  onchange="dataNameChange()"></input>
              </div>

            </div>
          </div>

        </div>
      </div>

      <div id="chart"></div>

      <script src="drawCanvas.js"></script>

    </body>

  </html>
